<template>
  <div class="chat-container" v-loading="loading">
    <el-row>
      <el-col :span="8"
        ><div class="chat bar" id="bar" style="width: 100%; height: 300px"></div
      ></el-col>
      <el-col :span="8"
        ><div class="chat line" id="line" style="width: 100%; height: 300px"></div
      ></el-col>
      <el-col :span="8"
        ><div class="chat pie" id="pie" style="width: 100%; height: 300px"></div
      ></el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { getHomeData } from '@/api/login'
import { ElMessage } from 'element-plus'

const loading = ref(false)
let chartBar: EChartsType | null = null
let chartLine: EChartsType | null = null
let chartPie: EChartsType | null = null

interface pieDataType {
  value: number
  name: string
}
const bar = reactive<number[]>([])
const line = reactive<number[]>([])
const pie = reactive<pieDataType[]>([])

getData()

onMounted(() => {
  // inixtChart()
  observerResize()
})

function getData() {
  try {
    loading.value = true
    getHomeData().then((res) => {
      const { barData, lineData, pieData } = res.data
      bar.push(...barData)
      line.push(...lineData)
      pie.push(...pieData)
      loading.value = false
      initChart()
    })
  } catch (err) {
    ElMessage({
      message: '获取数据失败',
      type: 'error',
    })
  }
}

function initChart() {
  initBar()
  initLine()
  initPie()
  resizeChart()
}

function initPie() {
  const chartDom = document.getElementById('pie') as HTMLElement
  chartPie = echarts.init(chartDom, null)
  const option = {
    title: {
      text: 'EChartsType 入门示例',
    },
    tooltip: {},
    legend: {
      data: ['销量'],
    },
    series: [
      {
        name: '销量',
        type: 'pie',
        radius: '50%',
        data: pie,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  chartPie.setOption(option)
}

function initLine() {
  const chartDom = document.getElementById('line') as HTMLElement
  chartLine = echarts.init(chartDom, null)
  const option = {
    title: {
      text: 'EChartsType 入门示例',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '牛仔裤', '西装', '皮鞋'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'line',
        data: line,
      },
    ],
  }
  chartLine.setOption(option)
}

function initBar() {
  const chartDom = document.getElementById('bar') as HTMLElement
  chartBar = echarts.init(chartDom, null)
  const option = {
    title: {
      text: 'EChartsType 入门示例',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '牛仔裤', '西装', '皮鞋'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: bar,
      },
    ],
  }
  chartBar.setOption(option)
}

function resizeChart() {
  window.addEventListener('resize', function () {
    chartBar?.resize()
    chartLine?.resize()
    chartPie?.resize()
  })
}

//通过监听视口变化动态缩放
function observerResize() {
  const curr = document.querySelector('.chat-container') as HTMLElement
  const resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      const { width, height } = entry.contentRect
      if (width > 0 && height > 0) {
        keepFit(entry.target as HTMLElement, curr)
        console.log(entries, '>>>')
      }
    }
  })
  resizeObserver.observe(document.body)
}

function keepFit(body: HTMLElement, curr: HTMLElement) {
  const designWidth = 1920
  const designHeight = 1080
  const width = body.clientWidth
  const height = body.clientHeight
  const scaleX = width / designWidth
  const scaleY = height / designHeight
  curr.style.transform = `scale(${scaleX}, ${scaleY})`
  curr.style.transformOrigin = '0 0'
}

// //使用vw vh单位 配合sass 计算函数计算元素的vw vh
// function setVwVh() {
//   const designWidth = 1920
//   const designHeight = 1080
//   const width = window.innerWidth
//   const height = window.innerHeight
//   const vw = (width / designWidth) * 100
//   const vh = (height / designHeight) * 100
//   document.documentElement.style.setProperty('--vw', `${vw}px`)
//   document.documentElement.style.setProperty('--vh', `${vh}px`)
// }
// setVwVh()

//使用font-size单位 配合sass 计算函数计算元素的vw vh
// function setFontSize() {
//   const designWidth = 1920
//   const designHeight = 1080
//   const width = window.innerWidth
//   const height = window.innerHeight
//   const fontSize = Math.min(width / designWidth, height / designHeight) * 100
//   document.documentElement.style.fontSize = `${fontSize}px`
// }
// setFontSize()

onUnmounted(() => {
  chartBar?.dispose()
  chartLine?.dispose()
  chartPie?.dispose()
})
</script>

<style scoped lang="scss"></style>
